<template>
	<view class="page">
		<header-bar :isSearchBar="true" @search="toSearch" />
		<yu-kefu></yu-kefu>

		<view class=""
			style="padding: 10rpx;box-sizing: border-box; display: grid;grid-template-columns: repeat(2, 50%);">
			<productItem @itemClicked="itemClicked" style="padding: 10rpx;" v-for="(item,n) in productList" :key="n"
				:product-id="item.id" :productName="item.name" :orignPrice="item.price" :price="item.final_price" :imgSrc = "item.images[0].url">
			</productItem>
		</view>
		

	</view>
</template>

<script>
	import HeaderBar from '../../components/header-bar.vue'
	import productItem from '../../components/product-item/product-item.vue'

	export default {
		components: {
			"header-bar": HeaderBar,
			productItem
		},
		data() {
			return {
				page: 1,
				size: 6,
				categoryId: "",
				title: "商品列表",
				name:"",
				productList: [
					// {id:"",
					// name:"",
					// price:0,
					// final_price:0,
					// imgSrc:""}

				],
				imageList: []

			}
		},
		onLoad(options) {
			console.log(options)
			this.categoryId = options.id;
			this.title = options.title;
			this.name = options.name;
			uni.setNavigationBarTitle({
				title: options.title
			})
			this.getProductList();

		},
		onPullDownRefresh() {
			this.page = 1;
			this.productList = [];
			this.getProductList()
		},
		onReachBottom() {
			this.getProductList()
		},
		methods: {

			toSearch(e) {
			
				this.init();
				console.log("搜索:" + e.key);
				this.name = e.key;
				uni.setNavigationBarTitle({
					title: e.title
				})
				this.getProductList();


			},
			itemClicked(e) {
				console.log(e)
				uni.navigateTo({
					url: "/pages/product-detail/product-detail?productId=" + e
				})
			},

			getProductList() {
				uni.showLoading({
					title:"加载中..."
				})
				var param = {
					categories_id: this.categoryId ? this.categoryId : "",
					page: this.page,
					size: this.size,
					name:this.name ? this.name : ""
				}
				let that = this
				this.$pin.request('GET', '/products', param,
					successData => {
						uni.stopPullDownRefresh();
						uni.hideLoading()
						if (successData.code == that.$pin.code.success) {
							var records = successData.data.records;
		
							if(records.length>0){
								
							
								that.productList = that.productList.concat(records);
								this.page++;
							}else{
								uni.showToast({
									title: '没有更多数据',
									icon: 'none'
								})
							}
					
						}
					},
					failData => {
						uni.showToast({
							icon: 'none',
							title: '获取分类信息失败'
						})
						uni.hideLoading()
				
					})
		
				
			},
			
			init(){
				this.page=1;
				this.name = "";
				this.title="";
			}
			
		
		}
	}
</script>

<style lang="scss">
	.page {
		// padding: 24rpx;
		// box-sizing: border-box;
	}
</style>